<template>
	<view class="container">
		<!-- 步骤条 -->
		<view class="steps-bar">
			<view v-for="(item, idx) in steps" :key="item" class="step-item"
				:class="{'active': step > idx, 'current': step === idx+1, 'clickable': step > idx+1}"
				@click="onStepClick(idx+1)">
				<view class="circle">
					<template v-if="step > idx+1">
						<uni-icons type="checkmarkempty" size="18" color="#00bcd4" />
					</template>
					<template v-else>
						{{ idx+1 }}
					</template>
				</view>
				<view class="step-label">{{ item }}</view>
				<view v-if="idx < steps.length-1" class="step-line"></view>
			</view>
		</view>

		<!-- 步骤1：填写预约信息 -->
		<view v-if="step === 1">
			<view class="title">填写预约信息</view>
			<view class="card">
				<view class="form-item">
					<text class="label">选择预约时间：</text>
					<uni-datetime-picker @change="timePickerChange" v-model="form.appointmentDate" type="date"
						:start="today" />
				</view>
				<view class="form-item">
					<text class="label">选择预约时间段：</text>
					<picker :range="timeList" @change="onTimeChange" :value="timeIndex">
						<view class="value" :class="{'placeholder': !form.appointmentTime}">
							{{ form.appointmentTime || '请选择' }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">预约人：</text>
					<input class="input" v-model="form.patientName" placeholder="请输入预约人姓名" />
				</view>
				<view class="form-item">
					<text class="label">性别：</text>
					<picker :range="genderList" @change="onGenderChange" :value="genderIndex" range-key="gender">
						<view class="value" :class="{'placeholder': !form.patientGender}">{{ genderIndex || '请选择' }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">手机号码：</text>
					<input class="input" v-model="form.contactPhone" placeholder="请输入手机号" maxlength="11" />
				</view>
				<view class="form-item">
					<text class="label">预约事项：</text>
					<input class="input" v-model="form.content" placeholder="预约事项" />
				</view>
			</view>
			<view class="notice-title">预约须知</view>
			<view class="notice-list">
				<view class="notice-item">· 可随时修改或取消预约</view>
				<view class="notice-item">· 若超时未到店，需重新预约</view>
			</view>
			<view class="footer">
				<view class="contact-btn" @click="onContact">
					<view class="iconfont">&#xe61b;</view>
					<view class="contact-text" @click="callPhone">联系医院</view>
				</view>
				<button class="btn-confirm" @click="onSubmit">预约</button>
			</view>
		</view>

		<!-- 步骤2：等待确认 -->
		<view v-else-if="step === 2">
			<view class="status-info">等待医馆确认信息</view>
			<view class="status-tip">预约已提交，稍后将有相关人员与您确认预约事宜，请保持手机畅通</view>
			<view class="card">
				<view class="form-item">
					<text class="label">预约时间：</text>
					<text class="value">{{ form.appointmentDate }}</text>
				</view>
				<view class="form-item">
					<text class="label">预约时间段：</text>
					<text class="value">{{ form.appointmentTime }}</text>
				</view>
				<view class="form-item">
					<text class="label">预约人：</text>
					<text class="value">{{ form.patientName }}</text>
				</view>
				<view class="form-item">
					<text class="label">性别：</text>
					<text class="value">{{ genderIndex }}</text>
				</view>
				<view class="form-item">
					<text class="label">手机号码：</text>
					<text class="value">{{ form.contactPhone }}</text>
				</view>
			</view>
			<view class="notice-title">预约须知</view>
			<view class="notice-list">
				<view class="notice-item">· 可随时修改或取消预约</view>
				<view class="notice-item">· 若超时未到店，需重新预约</view>
			</view>
			<view class="footer">
				<view class="contact-btn" @click="onContact">
					<view class="iconfont">&#xe61b;</view>
					<view class="contact-text">联系医院</view>
				</view>
				<!-- <button class="btn-confirm" @click="step = 1">修改信息</button> -->
				<!-- <button class="btn-confirm" style="margin-left: 24rpx;" @click="onSuccess">确认预约</button> -->
			</view>
		</view>

		<!-- 步骤3：预约成功 -->
		<view v-else-if="step === 3">
			<view class="success-bar">
				<uni-icons type="checkbox-filled" size="32" color="#00b96b" style="margin-right: 12rpx;" />
				<text class="success-title">预约成功</text>
			</view>
			<view class="success-tip">预约成功，请您在规定预约时间内到店</view>
			<view class="card">
				<view class="form-item">
					<text class="label">预约时间：</text>
					<text class="value">{{ form.appointmentDate }}</text>
				</view>
				<view class="form-item">
					<text class="label">预约时间段：</text>
					<text class="value">{{ form.appointmentTime }}</text>
				</view>
				<view class="form-item">
					<text class="label">预约人：</text>
					<text class="value">{{ form.patientName }}</text>
				</view>
				<view class="form-item">
					<text class="label">性别：</text>
					<text class="value">{{ genderIndex }}</text>
				</view>
				<view class="form-item">
					<text class="label">手机号码：</text>
					<text class="value">{{ form.contactPhone }}</text>
				</view>
			</view>
			<view class="notice-title">预约须知</view>
			<view class="notice-list">
				<view class="notice-item">· 可随时修改或取消预约</view>
				<view class="notice-item">· 若超时未到店，需重新预约</view>
			</view>
			<view class="footer">
				<view class="contact-btn" style="flex:2;" @click="onContact">
					<view class="iconfont">&#xe61b;</view>
					<view class="contact-text">联系医院</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import api from '@/common/api'
	import {
		showToast, utilLogin
	} from '@/common/util';

	const step = ref(1);
	const steps = ['填写信息', '等待确认', '预约成功'];
	const form = ref({
		userId: '',
		storeId: '',
		appointmentDate: '',
		appointmentTime: '',
		patientName: '',
		patientGender: '',
		contactPhone: '',
		content: '',
	});
	const allTimeList = ['9:00~12:00', '12:00~14:00', '14:00~18:00']
	const timeList = ref([...allTimeList])
	const timeIndex = ref('')
	const genderList = [{
		gender: '男',
		value: 1
	}, {
		gender: '女',
		value: 0
	}];
	const genderIndex = ref('');
	const clinicPhoneNumber = ref('')

	//----- 系统钩子 start ----
	onLoad((option) => {
		form.value.storeId = option.placeStoreId
		getClinicPhoneNumber()
		form.value.userId = JSON.parse(uni.getStorageSync('userAuth')).id
	})
	onMounted(() => {
		if (!utilLogin()) return
	})
	//----- 系统钩子 end ----

	//----- 一些逻辑 start ----
	let timePickerChange = (e) => {
		form.value.appointmentDate = e;
		// 判断是否为今天
		if (e === today.value) {
			const now = new Date();
			if (now.getHours() >= 12) {
				timeList.value = ['14:00~18:00'];
				// 如果当前已选时间段不是14:00~18:00，重置
				if (form.value.appointmentTime !== '14:00~18:00') {
					form.value.appointmentTime = '';
					timeIndex.value = '';
				}
			} else {
				timeList.value = [...allTimeList];
			}
		} else {
			timeList.value = [...allTimeList];
		}
	}
	let onTimeChange = (e) => {
		let index = e.detail.value
		timeIndex.value = timeList.value[index]
		form.value.appointmentTime = timeIndex.value
	}

	function onGenderChange(e) {
		let index = e.detail.value
		genderIndex.value = genderList[index].gender
		form.value.patientGender = genderList[index].value;
	}
	async function onSubmit() {
		// 校验逻辑
		if (!form.value.appointmentDate) {
			uni.showToast({
				title: '请选择预约日期',
				icon: 'none'
			});
			return;
		}
		if (!form.value.appointmentTime) {
			uni.showToast({
				title: '请选择预约时间段',
				icon: 'none'
			});
			return;
		}
		if (!form.value.patientName) {
			uni.showToast({
				title: '请输入预约人姓名',
				icon: 'none'
			});
			return;
		}
		if (form.value.patientGender === '' || form.value.patientGender === null) {
			uni.showToast({
				title: '请选择性别',
				icon: 'none'
			});
			return;
		}
		if (!form.value.contactPhone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		if (!form.value.content) {
			uni.showToast({
				title: '请输入预约事项',
				icon: 'none'
			});
			return;
		}
		// 校验通过，进入第二步

		try {
			uni.showLoading({
				title: '提交中...'
			});
			const res = await api.submitAppointment(form.value);
			uni.hideLoading();
			if (res && res.code === 200) {
				step.value = 2;
				showToast(res.msg, {
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: res?.msg || '预约失败',
					icon: 'none'
				});
			}
			uni.hideLoading();
		} catch (e) {
			uni.hideLoading();
			uni.showToast({
				title: '网络异常',
				icon: 'none'
			});
		}

	}

	// async function onSuccess() {
	// 	// 最终确认时才提交接口
	// 	try {
	// 		uni.showLoading({ title: '提交中...' });
	// 		const res = await api.submitAppointment(form.value);
	// 		uni.hideLoading();
	// 		if (res && res.code === 200) {
	// 			step.value = 3;
	// 			showToast(res.msg,{icon:'success'})
	// 		} else {
	// 			uni.showToast({ title: res?.msg || '预约失败', icon: 'none' });
	// 		}
	// 		uni.hideLoading();
	// 	} catch (e) {
	// 		uni.hideLoading();
	// 		uni.showToast({ title: '网络异常', icon: 'none' });
	// 	}
	// }
	function onContact() {
		uni.makePhoneCall({
			phoneNumber: clinicPhoneNumber.value,
			fail: (err) => {
				if (err.errMsg === 'makePhoneCall:fail cancel') {
					showToast('取消拨打')
				}
			}
		})
	}

	function onStepClick(targetStep) {
		if (targetStep < step.value) {
			step.value = targetStep;
		}
	}
	// 新增：获取今天日期
	function getToday() {
		const d = new Date();
		const m = d.getMonth() + 1;
		const day = d.getDate();
		return `${d.getFullYear()}-${m < 10 ? '0' + m : m}-${day < 10 ? '0' + day : day}`;
	}
	const today = ref(getToday());
	//----- 一些逻辑 end ----

	//----- 调用接口 start ----
	let getClinicPhoneNumber = async () => {
		const res = await api.getClinicInfoByType({
			id: form.value.storeId
		})
		clinicPhoneNumber.value = res?.data?.phone
	}
	//----- 调用接口 end -----
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #DBFFFB 3%, #D9EFFD 11%, #D7E5FF 22%, #F5F6FA 25%);
		padding: 24rpx 24rpx 24rpx 24rpx;
	}

	.steps-bar {
		display: flex;
		align-items: center;
		margin: 24rpx 0 32rpx 0;
		justify-content: center;
	}

	.step-item {
		display: flex;
		align-items: center;
		cursor: pointer;
		position: relative;
	}

	.step-item .circle {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #e0f7fa;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #00bcd4;
		border: 2rpx solid #e0f7fa;
		transition: all 0.2s;
	}

	.step-item.active .circle,
	.step-item.current .circle {
		background: linear-gradient(135deg, #6CEBE2 0%, #3AD3C1 100%);
		color: #fff;
		border: 2rpx solid #00bcd4;
	}

	.step-item .step-label {
		margin: 0 12rpx;
		font-size: 24rpx;
		color: #888;
	}

	.step-item.active .step-label,
	.step-item.current .step-label {
		color: #00bcd4;
		font-weight: bold;
	}

	.step-line {
		width: 48rpx;
		height: 2rpx;
		background: #e0f7fa;
	}

	.step-item.active~.step-line,
	.step-item.current~.step-line {
		background: linear-gradient(135deg, #6CEBE2 0%, #3AD3C1 100%);
	}

	.step-item.clickable {
		cursor: pointer;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 0rpx 0 24rpx 0;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
		padding: 32rpx 24rpx;
		margin-bottom: 32rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 28rpx;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.label {
		width: 220rpx;
		color: #666;
	}

	.value {
		width: 375rpx;
		flex: 1;
		color: #222;
	}

	.value.placeholder {
		color: #bbb;
	}

	.input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 28rpx;
		background: transparent;
	}

	.notice-title {
		font-size: 28rpx;
		color: #222;
		margin-bottom: 8rpx;
	}

	.notice-list {
		margin-bottom: 120rpx;
	}

	.notice-item {
		color: #888;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 16rpx 24rpx 32rpx 24rpx;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.contact-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 120rpx;
		background: #fff;
		border: none;
		margin-right: 24rpx;
		padding: 0;
	}

	.contact-img {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 8rpx;
	}

	.contact-text {
		font-size: 26rpx;
		color: #444;
	}

	.btn-confirm {
		flex: 2;
		background: linear-gradient(135deg, #6CEBE2 0%, #3AD3C1 100%);
		color: #fff;
		border-radius: 48rpx;
		font-size: 28rpx;
		border: none;
	}

	.status-info {
		font-size: 32rpx;
		color: #00bcd4;
		font-weight: bold;
		margin: 40rpx 0 8rpx 0;
	}

	.status-tip {
		font-size: 24rpx;
		color: #888;
		margin-bottom: 24rpx;
	}

	.success-bar {
		display: flex;
		align-items: center;
		margin: 40rpx 0 8rpx 0;
	}

	.success-title {
		font-size: 32rpx;
		color: #00b96b;
		font-weight: bold;
	}

	.success-tip {
		font-size: 24rpx;
		color: #888;
		margin-bottom: 24rpx;
		margin-left: 44rpx;
	}

	.popup-list {
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 24rpx 0;
	}

	.popup-item {
		padding: 32rpx;
		text-align: center;
		font-size: 30rpx;
		color: #222;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.popup-item:last-child {
		border-bottom: none;
	}
</style>